<template>
  <div class="top-bar">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item><img src="http://liufusong.top:8080/img/swiper/1.png" alt="" /></van-swipe-item>
      <van-swipe-item><img src="http://liufusong.top:8080/img/swiper/2.png" alt="" /></van-swipe-item>
      <van-swipe-item><img src="http://liufusong.top:8080/img/swiper/3.png" alt="" /></van-swipe-item>
    </van-swipe>
    <!-- 搜索栏 -->
    <div class="serach-box">
      <div class="location">
        <span class="city-name" @click="selectCity">{{ cityName }}</span>
        <i class="iconfont icon-arrow-sortdown-smal"></i>
      </div>
      <div class="form">
        <van-icon name="search" />
        <span class="text">请输入小区或地址</span>
      </div>
      <i class="iconfont icon-weizhi" @click="$router.push('/map')"></i>
    </div>
  </div>
</template>

<script>
import '@/components/HomePage/TopBar/index.css'
export default {
  name: 'TopBar',
  components: {},
  props: {},
  data() {
    return {
      cityName: JSON.parse(localStorage.getItem('cityName')).label || '上海'
    }
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    selectCity() {
      this.$router.push('/city')
    }
  }
}
</script>

<style lang="less">
.top-bar {
  position: relative;
}

.my-swipe {
  img {
    width: 375px;
    height: 212px;
  }
}
.serach-box {
  display: flex;
  padding: 5px 5px 5px 8px;
  position: absolute;
  top: 30px;
  left: 20px;
  background-color: #fff;
  border-radius: 5px;
  .location {
    height: 24px;
    margin-left: 13px;
    margin-top: 4px;
    .city-name {
      font-size: 13px;
    }
  }
  .form {
    margin-left: 14px;
    width: 210px;
    height: 17px;
    padding-left: 10px;
    border-left: 1px solid #ccc;
    margin-top: 5px;
    .text {
      padding-left: 4px;
      font-size: 13px;
      color: #9c9fa1;
    }
  }
  .icon-weizhi {
    display: block;
    position: absolute;
    top: 5px;
    left: 280px;
    margin-left: 30px;
    font-size: 24px;
    color: #fff;
  }
}
</style>
